@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* -------------------------------- 

Primary style

-------------------------------- */

html * {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
	@include box-sizing(border-box);
}

body {
	font: {
		size: 100%;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $main-text;
	background-color: $background;
}

a {
	color: $color-2;
	text-decoration: none;
}

img {
	max-width: 100%;
}

input, textarea {
	font-family: $primary-font;
	@include font-size(16px);

	&::-ms-clear {
    	display: none;
	}
}

/* -------------------------------- 

Main components 

-------------------------------- */

header[role=banner] {
	position: relative;
	height: $header-height-S;
	background: $color-1;

	#cd-logo {
		float: left;
		margin: 4px 0 0 5%;

		/* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
		@include transform-origin(0 50%);
		@include transform(scale(.8));

		img {
			display: block;
		}
	}

	&::after { /* clearfix */
		content: '';
		display: table;
		clear: both;
	}

	@include MQ(M) {
		height: $header-height-M;

		#cd-logo {
			margin: 20px 0 0 5%;
			@include transform(scale(1));
		}
	}
}

.main-nav {
	float: right;
	margin-right: 5%;
	width: 44px;
	height: 100%;
	background: url('../img/cd-icon-menu.svg') no-repeat center center;
	cursor: pointer;

	ul {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		@include transform(translateY(-100%));

		&.is-visible {
			@include transform(translateY($header-height-S));
		}
	}

	a {
		display: block;
		height: $header-height-S;
		line-height: $header-height-S;
		padding-left: 5%;
		background: darken($color-1, 5%);
		border-top: 1px solid lighten($color-1, 3%);
		color: #FFF;
	}

	@include MQ(M) {
		width: auto;
		height: auto;
		background: none;
		cursor: auto;

		ul {
			position: static;
			width: auto;
			@include transform(translateY(0));
			line-height: $header-height-M;

			&.is-visible {
				@include transform(translateY(0));
			}
		}

		li {
			display: inline-block;
			margin-left: 1em;

			&:nth-last-child(2) {
				margin-left: 2em;
			}
		}

		a {
			display: inline-block;
			height: auto;
			line-height: normal;
			background: transparent;

			&.cd-signin, &.cd-signup {
				padding: .6em 1em;
				border: 1px solid rgba(#FFF, .6);
				border-radius: 50em;
			}

			&.cd-signup {
				background: $color-2;
				border: none;
			}
		}
	}
}

/* -------------------------------- 

xsigin/signup popup 

-------------------------------- */


.cd-user-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba($color-1, .9);
	z-index: $modal-zindex;
	overflow-y: auto;
	cursor: pointer;

	visibility: hidden;
	opacity: 0;
	@include transition(opacity .3s 0, visibility 0 .3s);

	&.is-visible {
		visibility: visible;
		opacity: 1;

		@include transition(opacity .3s 0, visibility 0 0);

		.cd-user-modal-container {
			@include transform(translateY(0));
		}
	}
}

.cd-user-modal-container {
	position: relative;
	width: 90%;
	max-width: 600px;
	background: #FFF;
	margin: 3em auto 4em;
	cursor: auto;
	@include border-radius;
	@include transform(translateY(-30px));

	@include transition-property (transform);
	@include transition-duration(.3s);

	.cd-switcher {
		@include clearfix;

		li {
			@include column(.5);
			text-align: center;

			&:first-child a {
				border-radius: .25em 0 0 0;
			}

			&:last-child a {
				border-radius: 0 .25em 0 0;
			}
		}

		a {
			display: block;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background: $color-3;
			color: darken($color-3, 30%);

			&.selected {
				background: #FFF;
				color: $main-text;
			}
		}
	}

	@include MQ(S) {
		margin: 4em auto;

		.cd-switcher a {
			height: 70px;
			line-height: 70px;
		}
	}
}

.cd-form {
	padding: 1.4em;

	.fieldset {
		position: relative;
		margin: 1.4em 0;

		&:first-child {
			margin-top: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	label {
		@include font-size(14px);

		&.image-replace {
			/* replace text with an icon */
			display: inline-block;
			position: absolute;
			left: 15px;
			@include center(y);
			height: 20px;
			width: 20px;

			overflow: hidden;
			text-indent: 100%;
			white-space: nowrap;
			color: transparent;
			text-shadow: none;

			background-repeat: no-repeat;
			background-position: 50% 0;
		}

		&.cd-username {
			background-image: url('../img/cd-icon-username.svg');
		}

		&.cd-email {
			background-image: url('../img/cd-icon-email.svg');
		}

		&.cd-password {
			background-image: url('../img/cd-icon-password.svg');
		}
	}

	input {
		margin: 0;
		padding: 0;
		@include border-radius;

		&.full-width {
			width: 100%;
		}

		&.has-padding {
			padding: 12px 20px 12px 50px;
		}

		&.has-border {
			border: 1px solid $color-3;
			@include appearance(none);

			&:focus {
				border-color: $color-1;
				box-shadow: 0 0 5px rgba($color-1, .1);
				outline: none;
			}
		}

		&.has-error {
			border: 1px solid $red;
		}

		&[type=password] { 
			/* space left for the HIDE button */
			padding-right: 65px; 
		}

		&[type=submit] {
			padding: 16px 0;
			cursor: pointer;
			background: $color-2;
			color: #FFF;
			font-weight: bold;
			border: none;
			@include appearance(none);

			.no-touch &:hover, .no-touch &:focus {
				background: lighten($color-2, 5%);
				outline: none;
			}
		}
	}

	.hide-password {
		display: inline-block;
		position: absolute;
		right: 0;
		top: 0;
		padding: 6px 15px;
		border-left: 1px solid $color-3;
		@include center(y); // see partials > _mixins.scss
		@include font-size(14px);
		color: $color-1;
	}

	.cd-error-message {
		display: inline-block;
		position: absolute;
		left: -5px;
		bottom: -35px;
		background: rgba($red, .9);
		padding: .8em;
		z-index: 2;
		color: #FFF;
		@include font-size(13px);
		@include border-radius;

		/* prevent click and touch events */
		pointer-events: none;

		visibility: hidden;
		opacity: 0;

		@include transition(opacity .2s 0, visibility 0 .2s);

		&::after {
			/* triangle */
			content: '';
			position: absolute;
			left: 22px;
			bottom: 100%;
			@include triangle(16px, rgba($red, .9), up);
		}

		&.is-visible {
			opacity: 1;
			visibility: visible;

			@include transition(opacity .2s 0, visibility 0 0);
		}
	}

	@include MQ(S) {
		padding: 2em;

		.fieldset {
			margin: 2em 0;

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		input.has-padding {
			padding: 16px 20px 16px 50px;
		}

		input[type=submit] {
			padding: 16px 0;
		}
	}
}

.cd-form-message {
	padding: 1.4em 1.4em 0;
	@include font-size(14px);
	line-height: 1.4;
	text-align: center;

	@include MQ(S) {
		padding: 2em 2em 0;
	}
}

.cd-form-bottom-message {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -30px;
	text-align: center;
	@include font-size(14px);

	a {
		color: #FFF;
		text-decoration: underline;
	}
}

.cd-close-form {
	/* form X button on top right */
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	right: 0;
	top: -40px;
	background: url('../img/cd-icon-close.svg') no-repeat center center;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;

	@include MQ(L) {
		display: none;
	}
}

#cd-login, #cd-signup, #cd-reset-password {
	display: none;
}

#cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected {
	display: block;
}

